<template>
  <n-tabs justify-content="space-around" type="line">
    <n-tab-pane name="ajax" tab="远端数据">
      <n-form :model="apiForm" label-width="80" label-placement="left">
        <n-form-item path="api" label="远端api">
          <n-input
            type="text"
            v-model:value="apiForm.api"
            @update:value="
              $emit('update:value', Object.assign({}, apiForm, { api: $event }))
            "
          />
        </n-form-item>
        <n-form-item path="id" label="ID">
          <n-input
            type="text"
            default-value="id"
            v-model:value="apiForm.id"
            @update:value="
              $emit('update:value', Object.assign({}, apiForm, { id: $event }))
            "
          />
        </n-form-item>
        <n-form-item path="label" label="标签">
          <n-input
            type="text"
            default-value="label"
            v-model:value="apiForm.label"
            @update:value="
              $emit(
                'update:value',
                Object.assign({}, apiForm, { label: $event })
              )
            "
          />
        </n-form-item>
        <n-form-item path="value" label="值">
          <n-input
            type="text"
            default-value="value"
            v-model:value="apiForm.value"
            @update:value="
              $emit(
                'update:value',
                Object.assign({}, apiForm, { value: $event })
              )
            "
          />
        </n-form-item>
        <n-form-item v-if="type == 'tree'" path="children" label="子集">
          <n-input
            type="text"
            default-value="children"
            v-model:value="apiForm.children"
            @update:value="
              $emit(
                'update:value',
                Object.assign({}, apiForm, { children: $event })
              )
            "
          />
        </n-form-item>
      </n-form>
    </n-tab-pane>
    <n-tab-pane name="static" tab="静态数据">
      <code-edit v-model:value="code" @update:value="getCode" />
    </n-tab-pane>
  </n-tabs>
</template>
<script>
import { ref,onMounted } from "vue";
import { uuid } from "vue-uuid";
import CodeEdit from "./CodeEdit.vue";
export default {
  components: { CodeEdit },
  props: ["value", "type"],
  setup(props, { emit }) {
    //远端API数据
    const apiForm = ref({
      api: "",
      id: "id",
      label: "label",
      value: "value",
      children: "children",
    });
    //返回值有问题，在FieldAttrib中无法获取对象
    const getCode = (value) => {
      let obj = {};
      try {
        obj = JSON.parse(value);
        emit("update:value", obj);
      } catch (e) {}
    };
    const code =
      props.type == "tree"
        ? `[
    {
        "value":1,
        "label":1,
        "key":1,
        "children":[
            {
                "value":2,
                "label":2,
                "key":2
            }
        ]
    }
]`
        : `[{"value":1,"label":1}]`;
    
    onMounted(() => {
      getCode(code)
    })

    return {
      apiForm,
      code,
      uuid,
      getCode,
    };
  },
};
</script>
